<template>
  <el-dropdown @command="hanldlangchange">
    <i class="iconfont icon-yuyanfanyi"></i>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh" :disabled="currentlang === 'zh'">中文</el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentlang === 'en'">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
import { defineComponent, computed, watch } from 'vue'
import { headerStore } from '../store/head'

import { useI18n } from 'vue-i18n'

export default defineComponent({
  setup() {
    const i18n = useI18n()
    const headerstore = headerStore()
    const hanldlangchange = (e) => {
      headerstore.changelang(e)
      i18n.locale.value = e
    }
    const currentlang = computed(() => {
      return i18n.locale.value
    })
    watch(
      () => headerstore.lang,
      (newval) => {
        i18n.locale.value = newval
      },
      {
        deep: true,
        immediate: true
      }
    )

    return {
      hanldlangchange,
      currentlang
    }
  }
})
</script>

<style lang="scss" scoped>
.icon-yuyanfanyi {
  font-size: 32px;
  color: rgb(104, 129, 199);
  margin-right: 6px;
}
</style>
